<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg"><% if(typeof(adminRole)!="undefined"){ %>管理员</strong> / <small>Administrator</small><% }else{ %>会员</strong> / <small>Member</small><% } %></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-6">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <% if(typeof(adminRole)!="undefined"){ %>
            <button type="button" class="am-btn am-btn-default" id="user-btn-prompt-newUser"><span class="am-icon-plus"></span> 新增</button>
            <% } %>
            <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
          </div>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-3">

      </div>
      <div class="am-u-sm-12 am-u-md-3">
        <div class="am-input-group am-input-group-sm">
          <input type="text" class="am-form-field" id="search">
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" onclick="search()" type="button">搜索</button>
          </span>
        </div>
      </div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12">
          <table class="am-table am-table-striped am-table-hover table-main">
            <thead>
              <tr>
                <th class="table-check"><input type="checkbox" /></th><th class="table-id am-hide-sm-only">ID</th><th class="table-title">用户名</th><th class="table-type">昵称</th><th class="table-author am-hide-sm-only">邮箱</th><th class="table-date am-hide-sm-only">创建日期</th><th class="table-set">操作</th>
              </tr>
          </thead>
          <tbody>
          	<% for(var i=0;i<pager.pagesize;i++){ %>
                <% if(i<results.length){ %>
                <tr>
                  <td><input type="checkbox" /></td>
                  <td class="am-hide-sm-only"><%= results[i].id %></td>
                  <td><a href="#"><%= results[i].get("username") %></a></td>
                  <td><%= results[i].get("displayName") %></td>
                  <td class="am-hide-sm-only"><% if(results[i].get("email")){ %><%= results[i].get("email") %><% }else{ %>-<% } %></td>
                  <td class="am-hide-sm-only"><%= moment(results[i].createdAt).zone(-8).format('YYYY年MM月DD日 HH:mm:ss') %></td>
                  <td>
                    <div class="am-btn-toolbar">
                      <div class="am-btn-group am-btn-group-xs">
                        <div class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="gotoUrl('edit?id=<%= results[i].id %>')"><span class="am-icon-pencil-square-o"></span> 编辑</div>
                        <div class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="deleteOne('<%= results[i].id %>','user','list?role=admin')"><span class="am-icon-trash-o"></span> 删除</div>
                      </div>
                    </div>
                  </td>
                </tr>
                <% }else{ %>
                <tr>
                  <td colspan="7">&nbsp;</td>
                </tr>
                <% } %>
            <% } %>
          </tbody>
        </table>
        <hr />
		<%= include ic/admin-pager.html %>
		<hr />
        <p></p>
      </div>

    </div>
  </div>
  <!-- content end -->
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="new-user">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">新增管理员</div>
    <div class="am-modal-bd">
    <form action="/admin/user/new" method="post" class="am-form" id="am-form-new-user">
      <fieldset>
        <div class="am-input-group">
    		  <span class="am-input-group-label"><i class="am-icon-user"></i></span>
    		  <input type="text" name="name" class="am-form-field" placeholder="用户名（2-16字符）" data-foolish-msg="2-16字符的用户名" minlength="2" maxlength="16" required>
    		</div>

        <div class="am-input-group">
    		  <span class="am-input-group-label"><i class="am-icon-user"></i></span>
    		  <input type="text" name="displayName" class="am-form-field" placeholder="昵称（2-16字符）" data-foolish-msg="2-16字符的昵称" minlength="2" maxlength="16" required>
    		</div>

    		<div class="am-input-group">
    		  <span class="am-input-group-label"><i class="am-icon-envelope"></i></span>
    		  <input type="email" name="email" class="am-form-field" placeholder="Email" required>
    		</div>

    		<div class="am-input-group">
    		  <span class="am-input-group-label"><i class="am-icon-lock"></i></span>
    		  <input type="text" name="password"  class="am-form-field" pattern="^\w+$" minlength="5" maxlength="16" data-foolish-msg="5-16位，只能包含英文字符、数字和下划线！" placeholder="密码（5-16位，只能包含英文字符、数字和下划线）"  required>
    		</div>
        <button class="am-hide" type="submit"></button>
      </fieldset>
    </form>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span id="new-user-modal-btn-confirm" style="display:table-cell!important;padding:0 5px;color:#0e90d2;font-size:1.6rem;cursor:pointer">提交</span>
    </div>
  </div>
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
#vld-tooltip {position:absolute;z-index: 1200;padding: 5px 10px;background: #F37B1D;min-width: 150px;color: #fff;transition: all 0.15s;box-shadow: 0 0 5px rgba(0,0,0,.15);display: none;}
#vld-tooltip:before {position: absolute;top: -8px;left: 50%;width: 0;height: 0;margin-left: -8px;content: "";border-width: 0 8px 8px;border-color: transparent transparent #F37B1D;border-style: none inset solid;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
$(function() {
	$('#user-btn-prompt-newUser').on('click', function() {
		$('#new-user').modal({
			onCancel: function(e) {
			  $('#new-user .am-form-field').val("");
			}
		});
	});
	$('#new-user-modal-btn-confirm').on('click', function (){
		$('#am-form-new-user button:submit').click();
	});
	var $form = $('#am-form-new-user');
	var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
	$tooltip.appendTo(document.body);

	$form.validator();

	var validator = $form.data('amui.validator');

	$form.on('focusin focusout', '.am-form-error input', function(e) {
		if (e.type === 'focusin') {
			var $this = $(this);
			var offset = $this.offset();
			var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));
			$tooltip.text(msg).show().css({
				left: offset.left + 10,
				top: offset.top + $(this).outerHeight() + 10
			});
		} else {
			$tooltip.hide();
		}
	});
});

function search(){
  var param       = {};
  var url         = window.location.href;
  var arr         = url.split('?');
  var basicurl    = arr[0]+"?";
  var search      = $("#search").val();
  var urlParam    = "<%- urlParam %>";
  <% for(var key in param){ %>
    <% if(typeof(param[key])=="string"){ %>
    param['<%= key %>']="<%= param[key] %>";
    <% }else{ %>
    param['<%= key %>']=<%= param[key] %>;
    <% } %>
  <% } %>
  if(urlParam.indexOf("search=")==-1){
    window.location.href=basicurl+"&search="+search;
  }else{
    window.location.href=basicurl
      +urlParam.replace("search="+param["search"],"search="+search);
  }
}
</script>
